<template>
  <div class="order-container">
    <!-- 查询条件区域 -->
    <div class="search-section">
      <div class="section-title">
        <i class="el-icon-search"></i>
        <span>查询条件</span>
      </div>
      <el-form :inline="true" class="search-form">
        <el-form-item label="订单号">
          <el-input v-model="records.orderId" placeholder="请输入订单号" clearable></el-input>
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input v-model="records.customerName" placeholder="请输入客户名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="出发城市">
          <el-input v-model="records.fCity" placeholder="请输入出发城市" clearable></el-input>
        </el-form-item>
        <el-form-item label="目的城市">
          <el-input v-model="records.sCity" placeholder="请输入目的城市" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryAllOrder" icon="el-icon-search">查询</el-button>
          <el-button @click="resetList" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 订单列表区域 -->
    <div class="list-section">
      <div class="section-title">
        <i class="el-icon-tickets"></i>
        <span>订单列表</span>
      </div>
      
      <!-- 工具栏 -->
      <div class="toolbar">
        <div class="left-tools">
          <el-button-group>
            <el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
            <el-button type="danger" icon="el-icon-delete" size="small">删除</el-button>
            <el-button type="primary" icon="el-icon-printer" size="small">打印</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="small" @click="resetList">刷新</el-button>
            <el-button type="success" icon="el-icon-download" size="small">导出</el-button>
          </el-button-group>
        </div>
        <div class="right-tools">
          <el-radio-group v-model="orderStatus" size="small" @change="queryOrderBustatus">
            <el-radio-button label="unsubmitted">未提交</el-radio-button>
            <el-radio-button label="submitted">已提交</el-radio-button>
            <el-radio-button label="cancelled">已取消</el-radio-button>     
          </el-radio-group>
        </div>
      </div>

      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        stripe
        v-loading="loading"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="orderId" label="订单编号" width="120"></el-table-column>
        <el-table-column prop="orderSource" label="订单来源" width="120">
          <template slot-scope="scope">
            {{orderSourceMap[scope.row.orderSource]}}
          </template>
        </el-table-column>
        <el-table-column prop="transportType" label="运输类型" width="120">
          <template slot-scope="scope">
            {{transportTypeMap[scope.row.transportType]}}
          </template>
        </el-table-column>
        <el-table-column prop="customerName" label="客户名称" width="120"></el-table-column>
        <el-table-column prop="orderDate" label="下单时间" width="160"></el-table-column>
        <el-table-column prop="fcity" label="出发城市" width="120"></el-table-column>
        <el-table-column prop="scity" label="目的城市" width="120"></el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="queryDetail(scope.row.orderId)">
              <i class="el-icon-view"></i> 查看
            </el-button>
            <el-button type="text" size="small" @click="updateOrder(scope.row.orderId)">
              <i class="el-icon-edit"></i> 修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="sizeChange"
          @current-change="changePage"
          :current-page="pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
    data() {
        return {
        records: {},
        tableData: [],
        total: 0,
        pageSize: 10,
        pageNum: 1,
        loading: false,
        orderStatus: '',
        orderSourceMap:{
          1:'手动录入',
          2:'微信小程序'
        },
        transportTypeMap: {
          1: '公路运输',
          2: '铁路运输',
          3: '航空运输',
          4: '海洋运输'
        },   
      }
    },

    methods: {
      //查询全部订单
        queryAllOrder(){
            let pageParams = {}
            pageParams.pageNum = this.pageNum;
            pageParams.pageSize = this.pageSize;
            pageParams.param = this.records;
            console.log(pageParams);
            
            this.$axios.post('api/order/queryAllOrder',pageParams)
                .then(res=>{
                    if(res.data.code==200){
                        this.tableData = res.data.data.list;
                        this.total = res.data.data.total;
                    }else{
                        this.$message({
                            message: '查询失败',
                            type: 'error'
                        });
                    }
                })
        },
        //根据Id查询订单详情
        queryDetail(orderId){
          //跳转到查询详情页，并且传入订单Id
          this.$router.push({path:'/orderDetail', query:{'orderId': orderId}});
        },
        //修改订单信息
        updateOrder(orderId){
          this.$router.push({path:'/updateOrderDetail', query:{'orderId': orderId}});
        },
        //从第一页查询
        queryRecords(){
            this.pageNum = 1;
            this.queryAllOrder();
        },
        //跳转页
        //下一页
        //上一页
        //当前页
        //每页多少条
        nextPage(val){
            // alert(val)触发函数时，val代表改变后的当前页（回调参数）
            // 点击下一页触发
            //1：把最新的pageNum赋值
            //2：调查方法
            this.pageNum = val;
            this.queryAllOrder();
        },
        prevPage(val){
            // alert(val)触发函数时，val代表改变后的当前页（回调参数）
            // 点击上一页触发
            //1：把最新的pageNum赋值
            //2：调查方法
            this.pageNum = val;
            this.queryAllOrder();
        },
        changePage(val){
            // alert(val)触发函数时，val代表改变后的当前页（回调参数）
            // 点击页码触发
            //1：把最新的pageNum赋值
            //2：调查方法
            this.pageNum = val;
            this.queryAllOrder();
        },
        sizeChange(val){
            this.pageSize = val;
            this.queryAllOrder();
        },
        //重置
        resetList(){
          this.records = {};
          this.orderStatus = '';
          this.queryAllOrder();
        },
        queryOrderBustatus(){
          // console.log(this.orderStatus);
          if(this.orderStatus=='unsubmitted'){
            this.records.orderStatus = 1;
          }else if(this.orderStatus=='submitted'){
            this.records.orderStatus = 2;
          }else if(this.orderStatus=='cancelled'){
            this.records.orderStatus = 3;
          }
          // console.log(this.records);
          //根据订单状态查询全部订单
          this.queryRecords();
        },




    },

    created() {
      // 页面创建时自动查询数据
      this.queryAllOrder();
    },

    };
</script>

<style scoped>
    .order-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: 100%;
    }

    .search-section, .list-section {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    margin-bottom: 20px;
    padding: 20px;
    }

    .section-title {
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 15px;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 500;
    color: #303133;
    }

    .section-title i {
    margin-right: 8px;
    color: #409EFF;
    }

    .search-form {
    margin-top: 15px;
    }

    .toolbar {
    margin: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

    .left-tools {
    display: flex;
    align-items: center;
    }

    .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    }

    /* 响应式调整 */
    @media screen and (max-width: 1200px) {
    .el-form--inline .el-form-item {
        margin-right: 10px;
    }
    }
</style>